<template>
  <div class="container">
    <h4>企业账户</h4>
    <div class="card w-60 m-r">
      <div class="card-hd">
        <span class="circle-container">
          <i class="fa fa-dollar"></i>
        </span>
        资产概览
      </div>
      <div class="card-bd">
        <div class="total">
          <p class="money">55,082,258.00<i class="fa fa-long-arrow-up"></i></p>
          <p class="text">总资产</p>
        </div>
        <div class="month-in">
          <p class="money">31,500.00<i class="fa fa-long-arrow-up"></i></p>
          <p class="text">月收入</p>
        </div>
        <div class="month-out">
          <p class="money">7,258.00<i class="fa fa-long-arrow-down"></i></p>
          <p class="text">月支出</p>
        </div>
      </div>
    </div>
    <div class="card w-30">
      <div class="card-hd">
        <span class="circle-container">
          <i class="fa fa-credit-card"></i>
        </span>
        公司账户余额
      </div>
      <div class="card-bd temp-h">
        <p class="account">
          <span>中国兴业银行</span>
          <span>12,000,000.00</span>
        </p>
        <p class="account">
          <span>中国民生银行</span>
          <span>23,052,000.00</span>
        </p>
        <p class="account">
          <span>中国工商银行</span>
          <span>12,013,000.00</span>
        </p>
      </div>
    </div>
    <div class="card w-100">
      <div class="card-hd">
        <span class="circle-container">
          <i class="fa fa-line-chart"></i>
        </span>
        季度概览
      </div>
      <div class="card-bd" style="padding: 0">
        <div id="my_chart" style="width: 100%;height: 500px"></div>
      </div>
    </div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</template>

<script type="text/ecmascript-6">
  import '../../assets/css/base.css'
  import echarts from 'echarts'

  export default {
    mounted() {
      let myChart = echarts.init(document.getElementById('my_chart'))
      // 指定图表的配置项和数据
      var option = {
        tooltip: {},
        xAxis: {
          name: '月份',
          data: ['2', '5', '8', '11', '1']
        },
        yAxis: {
          name: '万'
        },
        series: [{
          name: '收入',
          type: 'line',
          data: [720, 501, 510, 505, 765]
        }]
      }
      myChart.setOption(option)
    }
  }
</script>

<style>
  .w-100 {
    margin-top: 20px;
    width: 96%;
  }

  .w-30 {
    width: 30%;
  }

  .w-60 {
    width: 60%;
  }

  .m-r {
    margin-right: 1%;
  }

  .total, .month-in, .month-out {
    width: 32.5%;
    display: inline-block;
  }

  .total .money, .month-in .money, .month-out .money {
    font-size: 35px;
    padding: 10px 0 30px 0;
    text-align: center;
  }

  .total .money {
    color: #0e89e7;
    text-shadow: 2px 5px 7px #0e89e7;
  }

  .month-in .money {
    color: #69c100;
    text-shadow: 2px 5px 7px #69c100;
  }

  .month-out .money {
    color: #e32b52;
    text-shadow: 2px 5px 7px #e32b52;
  }

  .total .money i, .month-in .money i, .month-out .money i {
    margin-left: 20px;
    font-size: 20px;
  }

  .total .money i, .month-in .money i {
    color: #69c100;
    text-shadow: none;
  }

  .month-out .money i {
    text-shadow: none;
  }

  .total .text, .month-in .text, .month-out .text {
    font-size: 16px;
    text-align: center;
  }

  .temp-h {
    height: 136.60px;
  }

  .account {
    margin-bottom: 20px;
  }

  .account span:last-child {
    float: right;
  }
</style>
